<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationBarTitleText: '格知汇GACC',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="entire" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <image class="bg" :src="loginBg"></image>
    <view class="title1">格知汇</view>
    <view class="title2">Grundfos Academy China Club</view>
    <view class="input-area">
      <image class="input-bg" :src="inputBg"></image>
      <view class="input1">
        <input
          type="text"
          placeholder="用户名/账号/手机号"
          style="color: white; background-color: rgba(255, 255, 255, 0)"
          placeholder-style="color:#ffffff;"
          v-model="pageData.username"
        />
      </view>
      <view class="input2">
        <input
          password
          placeholder="请输入密码"
          style="color: white; background-color: rgba(255, 255, 255, 0)"
          placeholder-style="color:#ffffff;"
          v-model="pageData.password"
        />
      </view>
      <view class="btn-login" @click="handleLogin">登录</view>
      <view class="register-forget">
        <text @click="handleRegister">经销商注册</text>
        <text @click="handleFindPW">忘记密码</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from '@/store'
import { API } from '@/service'
import { newsList } from '@/service/news/news'
import { inputBg, loginBg } from '@/static/imgMap'
const safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets
const pageData = reactive({
  // username: '17739597972',
  // password: 'test11111111',
  // username: 'Z009',
  // password: 'learn11111111',
  username: '',
  password: '',
  // username: '18247170189',
  // password: '12345611a',
  /*  username: 'T0001',
  password: 'test@123!', */
})
const handleLogin = () => {
  const userData = { username: pageData.username, password: pageData.password }
  API.user.login(userData).then((res) => {
    const data = res.data
    const userStore = useUserStore()
    userStore.setUserInfo({ ...data })
    uni.showToast({
      title: '登录成功',
      icon: 'success',
      duration: 1000,
    })
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/index/index',
      })
    }, 1000)
  })
}
const handleRegister = () => {
  uni.navigateTo({
    url: '/pages/login/register',
  })
}
const handleFindPW = () => {
  uni.navigateTo({
    url: '/pages/login/findPw',
  })
}
onMounted(() => {
  // 自动登录逻辑
  const userStore = useUserStore()
  if (userStore.isLogined) {
    uni.showToast({
      title: '已登录,跳转中',
      icon: 'success',
      duration: 1000,
    })
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/index/index',
      })
    }, 1000)
  }
})
</script>
<style lang="scss">
.entire {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;

  .bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    width: 100vw;
    height: 100vh;
  }

  .title1 {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 100rpx;
    font-size: 50rpx;
    font-weight: 550;
    color: #fff;
  }

  .title2 {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20rpx;
    color: #fff;
  }

  .input-area {
    display: flex;
    flex-direction: column;
    width: 680rpx;
    height: 800rpx;
    margin-top: 120rpx;
    margin-left: 35rpx;
    background-color: #1b5b93;
    border-radius: 20rpx;
    box-shadow: inset 0rpx 0rpx 30rpx rgba(255, 255, 255, 0.22);

    .input-bg {
      width: 600rpx;
      height: 210rpx;
      margin-top: 60rpx;
      margin-left: 40rpx;
    }

    .input1 {
      z-index: 10;
      display: flex;
      margin-top: -185rpx;
      margin-left: 140rpx;
    }

    .input2 {
      z-index: 10;
      display: flex;
      margin-top: 55rpx;
      margin-left: 140rpx;
    }

    .btn-login {
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 600rpx;
      height: 80rpx;
      margin-top: 240rpx;
      margin-left: 40rpx;
      color: #fff;
      background-color: #134779;
      border-radius: 10rpx;
    }

    .register-forget {
      display: flex;
      justify-content: center;
      gap: 200rpx;
      padding: 30rpx;
      margin-top: 40rpx;
      color: #fff;

      text {
        position: relative;
        padding-bottom: 5rpx;
        font-size: 24rpx;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 110%;
          height: 2rpx;
          background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.8),
            rgba(255, 255, 255, 0)
          );
        }
      }
    }
  }
}
</style>
